﻿@{
    ViewBag.Title = "系统用户管理 - " + ViewBag.DomainTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form class="layui-form query-form ptop15" id="queryToolBar">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="qAccount" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="qName" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <span class="layui-btn layui-btn-sm" onclick="javascript: { tableReload();}">查询</span>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置查询条件</button>
            <a class="layui-btn layui-btn-warm layui-btn-sm" href="/SysUser/Edit">新增</a>
            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { deleteModels();}">批量删除</span>
        </div>
    </div>
</form>

<table class="layui-table" lay-filter="dataTable" lay-data="{id:'dataTable',height:'full-106',method:'post',cellMinWidth:120,page:true,limit:20,url:'/SysUser/AjaxData'}">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox',fixed: 'left'}">ID</th>
            <th lay-data="{field:'ID', fixed: 'left', width: 80}">ID</th>
            <th lay-data="{field:'CreateTime'}">创建时间</th>
            <th lay-data="{field:'IsValid', width:100 ,templet: '#tmpIsValid', unresize: true}">是否有效</th>
            <th lay-data="{field:'Account', minWidth: 150, edit: 'text'}">账号 E</th>
            <th lay-data="{field:'Name', edit: 'text'}">名称 E</th>
            <th lay-data="{field:'Remark', edit: 'textarea'}">备注 E</th>
            <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#tmpToolBar'}">操作</th>
        </tr>
    </thead>
</table>

<script type="text/html" id="tmpToolBar">
    <a class="layui-btn layui-btn-xs" href="/SysUser/Edit?id={{d.ID}}">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="tmpIsValid">
    <input type="checkbox" name="isValid" value="{{d.ID}}" lay-skin="switch" lay-text="T|F" lay-filter="IsValid" {{ d.IsValid ? 'checked' : '' }}>
</script>

@Html.Partial("~/Views/Shared/_Script.cshtml")

<script>
    var table = layui.table, form = layui.form;
    // 监听单元格编辑
    table.on('edit(dataTable)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        if (field === 'Account')
            data.Account = value;
        if (field === 'Name')
            data.Name = value;
        if (field === 'Remark')
            data.Remark = value;
        editModel(data);
    });
    // 监听是否有效
    form.on('switch(IsValid)', function (obj) {
        var data = null;
        for (var i = 0; i < table.cache.dataTable.length; i++) {
            if (table.cache.dataTable[i].ID == this.value) {
                data = table.cache.dataTable[i];
                break;
            }
        }
        if (data) {
            data.IsValid = obj.elem.checked;
            editModel(data);
        } else {
            layer.msg('数据异常：[' + this.value + '] 查询不到任何数据')
        }
    });
    // 监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'delete') {
            layer.confirm('真的删除行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                deleteModel(data.ID);
            });
        }
    });
    // 刷新table
    function tableReload() {
        var paras = $('#queryToolBar').getForm();
        table.reload('dataTable', {
            where: paras
            , page: { curr: 1 }
        });
    };
    // 删除models
    function deleteModels() {
        var checkStatus = table.checkStatus('dataTable')
        var data = checkStatus.data;
        if (data.length > 0) {
            var confirmWin = layer.confirm('确定删除选中行吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                //此处添加执行过程
                layer.close(confirmWin);
                var ids = '';
                for (var i = 0; i < data.length; i++) {
                    ids += data[i].ID + ',';
                }
                deleteModel(ids);
            }, function () {
                layer.close(confirmWin);
            });
        } else {
            layer.msg('未选中任何数据');
        }
    };
    // 提交修改
    function editModel(data) {
        $.post('/SysUser/AjaxEdit', data, function (result) {
            layer.msg(result.msg);
        });
    };
    // 提交删除
    function deleteModel(ids) {
        $.post('/SysUser/AjaxDelete', { ids: ids }, function (result) {
            layer.msg(result.msg);
            tableReload();
        });
    };
</script>